<template>
  <div class="layout-container">
    <div class="layout-container-table">
      <div class="list" v-loading="loading" element-loading-text="Loading..."
        element-loading-background="rgba(255, 255, 255, 0)">
        <Block v-for="(block, key) in list" :key="key" :data="block" @refreshData="refreshData" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import Block from './block.vue'
import { workData, statusData } from './enum'
import { getWorkByStatus } from '@/api/taskmanage/work'
export default defineComponent({
  components: {
    Block
  },
  setup() {
    const route = useRoute()
    let loading = ref(false)
    let list = ref([])
    const getList = () => {
      loading.value = true
      getWorkByStatus()
        .then(res => {
          loading.value = false
          list.value = res.data
        })
    }
    
    const refreshData = () => {
      const self: any = route.matched[route.matched.length-1].instances.default
      self.handleReload();
    }
    getList()
    return {
      loading,
      list,
      workData,
      statusData,
      getList,
      refreshData
    }
  }
})
</script>

<style lang="scss" scoped>
.layout-container-table {
  white-space: nowrap;
  padding: 15px 0 0 0;
  position: relative;

  :deep(.el-scrollbar__view) {
    height: 100%;
  }

  &::before,
  &::after {
    content: '';
    width: 15px;
    height: calc(100% - 20px);
    position: absolute;
    background: #fff;
    top: 0;
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  .list {
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: auto;
    text-align: left;
    height: 100%;
    padding: 0 15px;
    background: #fff;

    .block {
      margin-right: 20px;
    }

    .block:last-child {
      margin-right: 0;
    }
  }
}
</style>